﻿@model IEnumerable<LS.Models.CardManageModel>

<script type="text/javascript" src="/Scripts/jquery-ui-1.8.24.min.js"></script>
<script type="text/javascript" src="/Scripts/jQueryRotateCompressed.2.2.js"></script>
<link rel="stylesheet" href="~/Content/themes/base/jquery.ui.all.css" />
<style type="text/css">
    #myTable td {
        overflow: hidden;
    }

    .SerialNumber_td {
        width: 220px;
    }

    .newTag {
        /*width: 100px;
        height: 20px;
        background-color: #33FF00;
        margin-left: -40px;
        margin-right: 10px;
        -ms-transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        position: relative;
        float: left;
        font-size: 10px;
        text-align: center;
        transform: rotate(-45deg);*/
        width: 45px;
        margin-top: 5px;
        margin-right: 10px;
        background: #0263D3;
        position: relative;
        float: left;
        font-size: 10px;
        text-align: center;
        color: white;
    }

    .oldTag {
        width: 100px;
        height: 20px;
        margin-left: -40px;
        margin-right: 10px;
        /* Rotate div */
        -ms-transform: rotate(-30deg); /* IE 9 */
        -webkit-transform: rotate(-30deg); /* Safari and Chrome */
        position: relative;
        float: left;
        font-size: 10px;
        text-align: center;
        transform: rotate(-45deg);
    }

    .showAnimation {
        /*position: absolute;
        float: left;*/
    }
</style>
<table id="myTable" class="table table-striped table-bordered">
    <thead>
        <tr style="background-color: #4d4c4d; color: white;">
            <th>@Html.DisplayNameFor(model => model.Card) </th>
            <th>@Html.DisplayNameFor(model => model.Description)</th>
            <th>@Html.DisplayNameFor(model => model.ExpireDate)</th>
            <th>@Html.DisplayNameFor(model => model.Status)</th>
            <th style="display: none">Found test</th>
        </tr>
    </thead>

    <tbody id="tbody_mycards">
        @{
            bool topOne = true;
        }
        @foreach (var item in Model)
        {
            if (item.Card.UpdateDate.AddMinutes(10) > DateTime.Now)
            {
                if (topOne)
                {
                    topOne = false;
            <tr class="newTr showAnimation">
                <td class="SerialNumber_td">
                    <label class="newTag">New</label>
                    @*@Html.DisplayFor(modelItem => item.Card.SeiralNumber)*@
                    @*@Html.ActionLink(item.Card.SeiralNumber, "Edit", new { item.MemberCardId })*@
                    <a class="btn" style="width: 120px;float: right;margin-right: 10px;" href="/MyCard/Edit/?MemberCardId=@item.MemberCardId" data-toggle="modal" data-target="#eidtModal">@item.Card.SeiralNumber</a>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Description)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ExpireDate)

                </td>
                <td>@if (item.Status == 0)
                    {
                    @Html.ActionLink(item.Status.ToString(), "Found", "LFH", new { MemberCardId = item.MemberCardId }, null)
                         
                    }
                    else
                    {
                    @Html.DisplayFor(modelItem => item.Status)
                    }

                </td>
                <td style="display: none">@Html.ActionLink(item.Card.SeiralNumber, "IFindIt", "LFH", new { item.Card.SeiralNumber }, null)</td>
            </tr> 
                }
                else
                {
            <tr class="newTr">
                <td class="SerialNumber_td">
                    <label class="newTag">New</label>
                    @*@Html.DisplayFor(modelItem => item.Card.SeiralNumber)*@
                    @*@Html.ActionLink(item.Card.SeiralNumber, "Edit", new { item.MemberCardId })*@
                    <a class="btn" style="width: 120px;float: right;margin-right: 10px;" href="/MyCard/Edit/?MemberCardId=@item.MemberCardId" data-toggle="modal" data-target="#eidtModal">@item.Card.SeiralNumber</a>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Description)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ExpireDate)

                </td>
                <td>@if (item.Status == 0)
                    {
                    @Html.ActionLink(item.Status.ToString(), "Found", "LFH", new { MemberCardId = item.MemberCardId }, null)
                         
                    }
                    else
                    {
                    @Html.DisplayFor(modelItem => item.Status)
                    }

                </td>
                <td style="display: none">@Html.ActionLink(item.Card.SeiralNumber, "IFindIt", "LFH", new { item.Card.SeiralNumber }, null)</td>
            </tr> 
                }
            }
            else
            {
            <tr class="oldTr">
                <td class="SerialNumber_td">
                    @*@Html.DisplayFor(modelItem => item.Card.SeiralNumber)*@
                    @*@Html.ActionLink(item.Card.SeiralNumber, "Edit", new { item.MemberCardId })*@
                    <a class="btn" style="width: 120px;float: right;margin-right: 10px;" href="/MyCard/Edit/?MemberCardId=@item.MemberCardId" data-toggle="modal" data-target="#eidtModal">@item.Card.SeiralNumber</a>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Description)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ExpireDate)

                </td>
                <td>@if (item.Status == 0)
                    {
                    @Html.ActionLink(item.Status.ToString(), "Found", "LFH", new { MemberCardId = item.MemberCardId }, null)
                         
                    }
                    else
                    {
                    @Html.DisplayFor(modelItem => item.Status)
                    }

                </td>
                <td style="display: none">@Html.ActionLink(item.Card.SeiralNumber, "IFindIt", "LFH", new { item.Card.SeiralNumber }, null)</td>
            </tr>
            }
        }
    </tbody>
</table>
<div class="dd">
</div>

<script type="text/javascript">
    $('.newTr').ready(function () {
        //$(".newTr").toggle(function () {
        //    $(this).stop().animate({ backgroundColor: "#aa0000" }, "normal");
        //}, function () {
        //    $(this).stop().animate({ backgroundColor: "#aa0000" }, "normal");
        //});
        //$(".newTr").animate({ backgroundColor: "#aa0000" }, 1000);
    });
    $('.newTag').ready(function () {
        //alert('ddd');
        //$('.newTag').rotate(-25);
    });

    $('.newTr').click(function () {
        //$(this).animate({
        //    backgroundColor: "#aa0000"
        //});
    });
    $(".showAnimation").click(function () {
        //alert('dd');
        //$(".showAnimation").animate({ height: '0px' });
    });
</script>
